<template>
    <div>
        <Row style="margin-top:20px">
            <Col span="24">
            <span class="alltitle"><router-link to="项目列表"> 项目列表</router-link>>分享</span>
            </Col>
        </Row>
        <Row class="share-wrapper">
            <Col span="24">
            <span class="alltitle">图片上传</span>
            </Col>
            <Row class="share-content">
                <div class="banner-wrapper">
                    <img v-if="uploadbanner2" :src="uploadbanner2" class="banner" @click="handleClick">
                    <img v-else src="../images/sample.png" class="banner" @click="handleClick">
                    <p class="banner-info">分享实例1</p>
                    <div class="up-file">
                        <form>
                            <input class="bannerinput" accept="image/*" name="upimage" type="file" @change="uploadBanner($event)" style="width:100px;">
                        </form>
                    </div>
                </div>
                <div class="logo-wrapper">
                    <img v-if="uploadlogo2" :src="uploadlogo2" class="logo" @click="handleClick2">
                    <img v-else src="../images/barcode.png" class="logo" @click="handleClick2">
                    <p class="banner-info">分享实例2</p>
                    <div class="up-file">
                        <form>
                            <input class="logoinput" accept="image/*" name="upimage" type="file" @change="uploadLogo($event)" style="width:100px;">
                        </form>
                    </div>
                </div>
            </Row>
            <Row class="button">
                <Col span="15">
                <Button type="primary" size="large">
                    <a href="../51admin/moban.zip">
                        <font color="white">下载模板</font>
                    </a>
                </Button>
                </Col>
            </Row>
            <p class="logo-info">按照模板尺寸导出即可，图片大小在200K以内，格式为jpg，png即可</p>
            <Row class="button" style="text-align:center">
                <Col span="24">
                <Button type="primary" size="large" @click="handleShare">确认提交</Button>
                </Col>
            </Row>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
            return {
                uploadlogo2: "",
                uploadbanner2: "",
                bannerUrl: "",
                logoUrl: ""
            };
        },
        methods: {
            handleClick() {
                $(".bannerinput").click();
            },
            handleClick2() {
                $(".logoinput").click();
            },
            uploadBanner(e) {
                console.log(e);

                var self = this;
                var file = e.target.files[0];
                var filesize = file.size;
                var filename = file.name;

                if (filesize > 2101440) {
                    self.$Message.error("图片超过2m");
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    var imgcode = e.target.result;
                    self.uploadbanner2 = imgcode;
                    console.log(self.uploadbanner2);

                };
            },
            uploadLogo(e) {
                console.log(e);

                var self = this;
                var file = e.target.files[0];
                var filesize = file.size;
                var filename = file.name;

                if (filesize > 2101440) {
                    self.$Message.error("图片超过2m");
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    var imgcode = e.target.result;
                    self.uploadlogo2 = imgcode;
                    console.log(self.uploadlogo2);

                };
            },
            isBase64(str) {
                if (str.indexOf('data:') != -1 && str.indexOf('base64') != -1) {
                    return true;
                } else {
                    return false;
                }
            },

            handleShare() {
                var self = this
                var poid = localStorage.pid;
                console.log(poid);


                console.log(self.isBase64(String(self.uploadbanner2)),self.uploadbanner2)
                if (self.isBase64(String(self.uploadbanner2))) {
                    $.ajax({
                        url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyshare1&id=" + poid,
                        data: {
                            file: self.uploadbanner2
                        },
                        type: "POST",
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                            self.bannerUrl = data.url;
                            self.$Message.success("图片1上传成功");
                        }
                    });
                }
                if (self.isBase64(String(self.uploadlogo2))) {
                    $.ajax({
                        url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyshare2&id=" + poid,
                        data: {
                            file: self.uploadlogo2
                        },
                        type: "POST",
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                            self.logoUrl = data.url;
                            self.$Message.success("图片2上传成功");
                        }
                    });
                }
            }
        },
        created() {

            var self = this;
            var poid = localStorage.pid;
            $.ajax({
                url: "https://evp.51job.com/51job/api/51miniadmin/back.php?action=companyone&id=" + poid,
                type: "POST",
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    var data = data.data;


                    if (data.share_icon_1 !== "" && data.share_icon_1!== null) {
                        self.uploadbanner2 = "https://evp.51job.com/51job/api/51miniadmin/" + data.share_icon_1

                    } else {
                        //self.uploadbanner = "https://evp.51job.com/2019/51admin/icon2/sample.png"
                    }
                    if (data.share_icon_2 !== "" && data.share_icon_2!== null) {
                        self.uploadlogo2 = "https://evp.51job.com/51job/api/51miniadmin/" + data.share_icon_2

                    } else {
                        //self.uploadlogo = "https://evp.51job.com/2019/51admin/icon2/barcode.png"
                    }



                }
            });
        }
};
</script>
<style scoped>
.banner-wrapper {
    box-sizing: border-box;
    width: 369px;
    height: 206px;
    float: left;
}

.banner {
    box-sizing: border-box;
    width: 369px;
    height: 178px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #e5e5e5;
}

.logo {
    box-sizing: border-box;
    width: 178px;
    height: 178px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #e5e5e5;
}

.banner-info {
    text-align: center;
    counter-reset: #999;
    font-size: 14px;
    font-family: SourceHanSansCN-Normal;
    margin-top: 10px;
}

.banner-img,
.code-img {
    width: 100%;
}

.title {
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 40px;
    font-weight: bold;
}

.share-wrapper {
    box-sizing: border-box;
    height: 628px;
    padding: 20px;
    background-color: #fff;
    margin-top: 20px;
}

.share-content {
    height: 206px;
    margin-top: 40px;
}

.logo-wrapper {
    box-sizing: border-box;
    width: 178px;
    height: 206px;
    margin-left: 60px;
    float: left;
}

.button {
    margin-top: 50px;
}

.logo-info {
    margin-top: 20px;
    width: 256px;
    color: #ee2233;
    font-family: SourceHanSansCN-Normal;
    font-size: 12px;
    line-height: 18px;
}

.logoinput,
.bannerinput {
    display: none;
}
</style>
